<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
    </style>
    <script src="js/logheade.js"></script>
    <!--样式-->
    <link rel="stylesheet" href="./css/login.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app">
    <div class="login-form">
        <p style="margin-top: 15px;float: right"><a href="/reg.html" style="text-decoration: none ;color:#3CD5FF">帐号注册</a></p>
        <h2>登录</h2>
        <div v-if="loginMethod === 'password'">
            <el-input style=" width: 350px;margin: 10px 30px" placeholder="请输入用户名" v-model="login.username">
                <template slot="prepend">
                    <div class="el-input__prefix">
                        <i class="icon el-icon-user" style="margin-top: 6px;margin-left: 3px"></i>
                    </div>
                </template>
            </el-input><br>
            <el-input style=";margin: 10px 30px;width: 350px" type="password" placeholder="请输入密码" v-model="login.password">
                <template slot="prepend">
                    <div class="el-input__prefix">
                        <i class="icon el-icon-lock" style="margin-top: 6px;margin-left: 3px"></i>
                    </div>
                </template>
                <template>
                </template>

            </el-input><br>
            <div  class="verification-code" style=";margin: 10px 30px;width: 250px">
                <el-input type='text' v-model='value' @change='change()' placeholder="请输入验证码"  id="enteredCode" name="enteredCode"></el-input>
                <!--点击可获得新的验证码-->
                <div style="margin-left: 10px" id="code" onclick="generateCode()"></div>

            </div>

        </div>
        <div v-else>
            <el-input style=" width: 350px;margin: 10px 30px" placeholder="请输入手机号码" v-model="yzLogin.phone">
                <template slot="prepend">
                    <div class="el-input__prefix">
                        <i class="icon el-icon-phone" style="margin-top: 6px;margin-left: 3px"></i>
                    </div>
                </template>
            </el-input>
            <el-input style=";margin: 10px 30px;width: 350px" placeholder="请输入验证码" :id="'enteredCode' + (loginMethod === 'sms' ? '-sms' : '-password')" name="enteredCode" :value="countdown > 0 ? countdown + 's' : ''"
                      v-model="yzLogin.code">
                <template slot="prepend">
                    <div class="el-input__prefix">
                        <i class="icon el-icon-message" style="margin-top: 6px;margin-left: 3px"></i>
                    </div>
                </template>
            </el-input>
            <el-row style="margin: 10px 30px;">
                <el-button :disabled="isCodeSent" type="primary" plain @click="send">
                    <template>
                        {{ isCodeSent ? countdown + 's' : '发送验证码' }}
                    </template>
                </el-button>

            </el-row>

        </div>


        <el-radio-group v-model="login.flag" style="margin: 20px 30px">
            <el-radio label="2">用户</el-radio>
            <el-radio label="1">医生</el-radio>
            <el-radio label="0">管理员</el-radio>
        </el-radio-group>

        <template>
            <el-button style="margin-top: 30px"
                       type="primary"

                       @click="logins">登录

            </el-button>
        </template>

        <el-radio-group style="margin: 50px 30px" v-model="loginMethod">
            <el-radio onclick="javascript:window.location.reload(false);" label="password">密码登录</el-radio>
            <el-radio label="sms">短信验证码登录</el-radio>
        </el-radio-group>

    </div>
</div>
<!--下面的三个组件不要动-->
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<!-- 引入axios -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<!-- 引入Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    // 在页面加载完成后运行代码
    window.addEventListener('DOMContentLoaded', function() {
        // 模拟点击事件
        var element = document.getElementById('code');
        if (element) {
            element.dispatchEvent(new Event('click'));
        }
    });
</script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return{

                fullscreenLoading: false,

                value:'',
                code:'',
                loginMethod: 'password',
                phone: '',
                username: '',
                password: '',
                verificationCode: '',
                role: 'user'/*默认者为用户*/,
                isCodeSent: false, // 添加一个标志位来表示验证码是否已发送
                timer: null, // 用于存储计时器对象
                countdown: 60, // 倒计时初始值
                login:{
                    username: "",password:"",flag:"2"
                },
                yzLogin:{
                    flag: '',
                    phone: '',

                },
                accept:{
                    code: '',
                    phone: '',
                }
            }
        },
        methods: {
            loginsLoading() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 2000);
            },
            change() {
                this.$forceUpdate();
            },
            logins() {
                this.loginsLoading(); // 调用加载中方法显示加载提示
                // 前端验证逻辑
                if (v.login.username != null && v.login.username !== '') {
                    if (checkLogin()) {
                        /*要在验证码正确的条件下再进行后端验证*/
                        console.log("阻止不了我")
                        axios.post("/pa/users/login", v.login).then(function (response) {
                            console.log(response.data)
                            // 把装着登录成功用户信息的对象保存到localStorage 得到的是TOKEN令牌
                            /*localStorage.user = JSON.stringify(response.data.data);*/
                            if(response.data.code === 1001){
                                localStorage.clear();
                                localStorage.setItem('localJwt', response.data.data.token);
                                localStorage.setItem('currentUserId', response.data.data.userId);
                                localStorage.setItem('currentNickName', response.data.data.nickName);
                                localStorage.setItem('currentUserAvatar', response.data.data.Avatar);
                                localStorage.setItem("currentUsername",response.data.data.username);
                                localStorage.setItem("no",response.data.data.no);
                                if (v.login.flag==="2"){
                                    location.href = "/index.html";
                                }else if (v.login.flag==="1"){
                                    location.href = "/doctor.html";
                                }else {
                                    location.href = "/bgindex.html";
                                }
                            }else {
                                v.$message.error(response.data.msg);
                            }
                        });
                    }
                } else {
                    v.yzLogin.flag = v.login.flag;
                    axios.post("/pa/users/msLogin", v.yzLogin).then(function (response) {
                        console.log("===" + response.data.code);
                        //
                        if (response.data.code === 1001) {
                            localStorage.clear();
                            localStorage.setItem('localJwt', response.data.data.token);
                            localStorage.setItem('currentUserId', response.data.data.userId);
                            localStorage.setItem('currentNickName', response.data.data.nickName);
                            localStorage.setItem('currentUserAvatar', response.data.data.Avatar);
                            localStorage.setItem("currentUsername",response.data.data.username);

                                console.log(response.data)
                                if (v.login.flag==="2"){
                                    location.href = "/index.html";
                                }else if (v.login.flag==="1"){
                                    location.href = "/doctor.html";
                                }else {
                                    location.href = "/bgindex.html";
                                }

                        } else {
                            v.$message.error("登录不成功，请检查手机号和验证码");
                        }
                    });
                }
            },
            send() {
                axios.post("/pa/sends/yz", v.yzLogin).then(function (response) {
                    if (response.data.data == 2006) {
                        v.$message.success("发送成功");
                        v.isCodeSent = true; // 验证码已发送，禁用按钮
                        v.countdown = 60; // 重置倒计时为60秒

                        // 启动倒计时
                        var timer = setInterval(function () {
                            v.countdown--;
                            if (v.countdown === 0) {
                                clearInterval(timer); // 倒计时结束，清除计时器
                                v.isCodeSent = false; // 启用按钮
                            }
                        }, 1000);
                    } else {
                        v.$message.error("发送失败");
                    }
                });
            }
        },

    });

</script>

</body>
</html>
